From: Sebastian Wick <sebastian.wick@redhat.com>
Date: Sat, 21 Jun 2025 22:07:50 +0000 (+0200)
Subject: status/brightness: Handle multiple monitors
X-Git-Tag: archive/raspbian/50.5-1+rpi1~1^2~116^2^2~4
X-Git-Url: https://dgit.raspbian.org/%22http://www.example.com/cgi/%22/%22http:/www.example.com/cgi/%22?a=commitdiff_plain;h=586094dd17323b9267b262e219d2a4e53861ecf0;p=gnome-shell.git

status/brightness: Handle multiple monitors

The BrightnessManager exposes a global scale and per monitor scales
which we can also hook up to give users control over individual monitor
brightnesses. If there are more than one controllable backlight, the
brightness slider in quick settings becomes expandable and shows a
slider for each monitor with controllable backlight.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3751>
---

diff --git a/js/ui/status/brightness.js b/js/ui/status/brightness.js
index d4e57f1ca..f2e7f1b21 100644
--- a/js/ui/status/brightness.js
+++ b/js/ui/status/brightness.js
@@ -1,10 +1,39 @@
+import Clutter from 'gi://Clutter';
 import GObject from 'gi://GObject';
+import St from 'gi://St';
 
 import {QuickSlider, SystemIndicator} from '../quickSettings.js';
 import * as Main from '../main.js';
+import * as PopupMenu from '../popupMenu.js';
+import {Slider} from '../slider.js';
 
 const BRIGHTNESS_NAME = _('Brightness');
 
+class BrightnessSliderMenu extends PopupMenu.PopupMenuSection {
+    addSlider(scale) {
+        const text = new PopupMenu.PopupMenuItem(scale.name, {reactive: false});
+        this.addMenuItem(text);
+
+        const slider = new Slider(0);
+        slider.accessible_name = scale.name;
+
+        const sliderBin = new St.Bin({
+            style_class: 'slider-bin',
+            child: slider,
+            reactive: true,
+            can_focus: true,
+            x_expand: true,
+            y_align: Clutter.ActorAlign.CENTER,
+        });
+
+        const sliderMenuItem = new PopupMenu.PopupBaseMenuItem({reactive: false});
+        sliderMenuItem.add_child(sliderBin);
+        this.addMenuItem(sliderMenuItem);
+
+        return slider;
+    }
+}
+
 const BrightnessItem = GObject.registerClass(
 class BrightnessItem extends QuickSlider {
     _init() {
@@ -14,6 +43,10 @@ class BrightnessItem extends QuickSlider {
 
         this.slider.accessible_name = BRIGHTNESS_NAME;
 
+        this.menu.setHeader('display-brightness-symbolic', BRIGHTNESS_NAME);
+        this._monitorBrightnessSection = new BrightnessSliderMenu();
+        this.menu.addMenuItem(this._monitorBrightnessSection);
+
         this._manager = Main.brightnessManager;
         this._manager.connectObject('changed',
             this._onManagerChanged.bind(this), this);
@@ -31,12 +64,19 @@ class BrightnessItem extends QuickSlider {
         const {globalScale} = this._manager;
         this.set({
             visible: globalScale && !globalScale.locked,
+            menuEnabled: this._manager.scales.length > 1,
         });
 
         if (!this.visible)
             return;
 
+        this._monitorBrightnessSection.removeAll();
+
         this._connectSlider(this.slider, globalScale);
+        for (const scale of this._manager.scales) {
+            const slider = this._monitorBrightnessSection.addSlider(scale);
+            this._connectSlider(slider, scale);
+        }
     }
 
     _connectSlider(slider, scale) {